<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">

<!--<![endif]-->
<!-- Begin Head -->

<head>
    <title>用户管理</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="MobileOptimized" content="320">
    <!--Start Style -->
    <link rel="stylesheet" type="text/css" href="/admin/css/fonts.css">
    <link rel="stylesheet" type="text/css" href="/admin/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/admin/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/admin/css/icofont.min.css">
    <link rel="stylesheet" type="text/css" href="/admin/css/style.css">
	<link rel="stylesheet" id="theme-change" type="text/css" href="">
</head>


<body>
<div class="modal fade" id="exampleModal22" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel01">Edit Users' information</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label class="col-form-label">UserName:</label>
						<input type="text" class="form-control">
					</div>
					<div class="form-group">
						<label class="col-form-label">Password:</label>
						<input type="text" class="form-control">
					</div>
					<div class="form-group">
						<label class="col-form-label">Phone:</label>
						<input type="text" class="form-control">
					</div>
					<div class="form-group">
						<label class="col-form-label">Address:</label>
						<input type="text" class="form-control">
					</div>
					<div class="form-group">
						<label class="col-form-label">Remark:</label>
					<textarea class="form-control"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Send message</button>
			</div>
		</div>
	</div>
</div>
<div class="loader">
	  <div class="spinner">
		<img src="/admin/picture/loader.gif" alt="">
	  </div> 
	</div>
    <!-- Main Body -->
    <div class="page-wrapper">
        <!-- Header Start -->
        <div th:replace="/admin/common/header :: header"/>
        <!-- Sidebar Start -->
        <div th:replace="/admin/common/aside :: aside"/>
        <!-- Container Start -->
        <div class="page-wrapper">
            <div class="main-content">
                <!-- Page Title Start -->
                <div class="row">
                    <div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="page-title-wrapper">
                            <div class="page-title-box ad-title-box-use">
                                <h4 class="page-title">Users</h4>
                            </div>
                            <div class="ad-breadcrumb">
                                <ul>
                                    <li>
										<div class="ad-user-btn">
											<input class="form-control" type="text" placeholder="Search Here..." id="text-input">
											<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 56.966 56.966">
												<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23
												s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92
												c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17
												s-17-7.626-17-17S14.61,6,23.984,6z"></path>
											</svg>
										</div>
                                    </li>
                                    <li>
										<div class="add-group">

											<a class="ad-btn" data-toggle="modal" data-target="#exampleModal22">Add User</a>
										</div>
									</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Table Start -->
                <div class="row">
                    <!-- Styled Table Card-->
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card table-card">
                            <div class="card-header pb-0">
                                <h4>User List</h4>
                            </div>
                            <div class="card-body">
                                <div class="chart-holder">
                                    <div class="table-responsive">
                                        <table class="table table-styled mb-0">
                                            <thead>
                                                <tr>
                                                    <th>id</th>
                                                    <th>User</th>
                                                    <th>Password</th>
                                                    <th>Remark</th>
                                                    <th>Phone</th>
                                                    <th>Email</th>
													<th>Address</th>
                                                    <th>Operate</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr th:each="user:${userList.list}">
                                                    <td>[[${user.id}]]</td>
                                                    <td>
                                                        <span class="img-thumb">
                                                            <img th:src="@{${user.image}}" alt="">
                                                            <span class="ml-2">[[${user.username}]]</span>
                                                        </span>
                                                    </td>
<!--                                                    <td>-->
<!--&lt;!&ndash;                                                        <div class="progress">&ndash;&gt;-->
<!--&lt;!&ndash;                                                            <div class="progress-bar bg-primary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>&ndash;&gt;-->
<!--&lt;!&ndash;                                                        </div>&ndash;&gt;-->
<!--                                                        <span class="num" th:value="${user.username}"></span>-->
<!--                                                    </td>-->
                                                    <td>[[${user.password}]]</td>
<!--                                                    <td>-->
<!--                                                        <label class="mb-0 badge badge-primary" title="Pending">Pending</label>-->
<!--                                                    </td>-->
                                                    <td>[[${user.remark}]]</td>
                                                    <td>[[${user.phone}]]</td>
                                                    <td>[[${user.email}]]</td>
													<td>[[${user.address}]]</td>
                                                    <td class="relative">
                                                        <a class="action-btn " href="javascript:void(0); ">
                                                           <svg class="default-size " viewbox="0 0 341.333 341.333 ">
                                                                <g>
                                                                    <g>
                                                                        <g>
                                                                            <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
                                                                            <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
                                                                            <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </svg>
                                                        </a>
															<!-- 编辑 -->
                                                        <div class="action-option ">
                                                            <ul>
                                                                <li>
<!--																	<button type="button" class="btn btn-primary squer-btn" data-toggle="modal" data-target="#exampleModal22" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>-->

																	<a href="javascript:void(0); " data-toggle="modal" data-target="#exampleModal22"><i class="far fa-edit mr-2 "></i>Edit</a>
                                                                </li>
                                                                <li>
                                                                    <a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
								<div class="text-right">
									<nav class="d-inline-block">
										<ul class="pagination mb-0 ">
										  <li class="page-item">
											<a class="page-link" th:if="(${userList.pageNum} gt 0)" th:href="@{|/tUser/users?offset=${userList.pageNum-1}&limit=4|}" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
										  </li>
										  <li class="page-item active "><a class="page-link " th:href="@{/tUser/users?offset=1&limit=4}">首页</a></li>
										  <li class="page-item disabled">
											<a class="page-link " href="#">[[${userList.pageNum}]]</a>
										  </li>
										  <li class="page-item active"><a class="page-link " th:href="@{|/tUser/users?offset=${userList.pages}&limit=4|}">尾页</a></li>
										  <li class="page-item ">
											<a class="page-link " th:if="(${userList.pageNum} lt ${userList.pages+1})" th:href="@{|/tUser/users?offset=${userList.pageNum+1}&limit=3|}"><i class="fas fa-chevron-right "></i></a>
										  </li>
										</ul>
<!--										<ul class="pagination justify-content-center">-->
<!--											<li><a th:if="(${userList.pageNum} gt 0)" th:href="@{|/tUser/users?offset=${userList.pageNum-1}&limit=6|}">上一页</a></li>-->
<!--											<li><a  th:href="@{/tUser/users?offset=1&limit=6}">首页</a></li>-->
<!--											<li><a class="disabled active" href="#">[[${userList.pageNum}]]</a></li>-->
<!--											<li><a th:href="@{|/tUser/users?offset=${userList.pages}&limit=6|}">尾页</a></li>-->
<!--											<li><a th:if="(${userList.pageNum} lt ${userList.pages+1})" th:href="@{|/tProduct/products?offset=${userList.pageNum+1}&limit=6|}">下一页</a></li>-->
<!--										</ul>-->
                                  </nav>
								</div>
                            </div>
                        </div>
                    </div>
				</div>
				<div class="ad-footer-btm">
					<p>Copyright &copy; 2021.Software engineering team 4 production.<a target="_blank" ></a></p>
				</div>
            </div>
		</div>
	</div>
               
                
    <!-- Slide Setting Box -->
    <div class="slide-setting-box">
        <div class="slide-setting-holder">
            <div class="setting-box-head">
                <h4>General Settings</h4>
                <a href="javascript:void(0);" class="close-btn">Close</a>
            </div>
            <div class="setting-box-body">
				<div class="p-4"> 
					<div class="switch-settings">
						<div class="d-flex mb-3">
							<span class="mr-auto fs-15">Notifications</span>
							<div class="checkbox checkbox-toggle">
								<input id="checkbox55" type="checkbox">
								<label for="checkbox55"></label>
							</div>
						</div>
						<div class="d-flex mb-3">
							<span class="mr-auto fs-15">Show your emails</span>
							<div class="checkbox checkbox-toggle">
								<input id="checkbox56" type="checkbox">
								<label for="checkbox56"></label>
							</div> 
						</div>
						<div class="d-flex mb-3">
							<span class="mr-auto fs-15">Show Task statistics</span>
							<div class="checkbox checkbox-toggle">
								<input id="checkbox57" type="checkbox">
								<label for="checkbox57"></label>
							</div> 
						</div>
						<div class="d-flex mb-3">
							<span class="mr-auto fs-15">Show recent activity</span>
							<div class="checkbox checkbox-toggle">
								<input id="checkbox58" type="checkbox">
								<label for="checkbox58"></label>
							</div>
						</div>
						<div class="d-flex mb-3">
							<span class="mr-auto fs-15">System Logs</span>
							<div class="checkbox checkbox-toggle">
								<input id="checkbox59" type="checkbox">
								<label for="checkbox59"></label>
							</div> 
						</div>
						<div class="d-flex mb-3">
							<span class="mr-auto fs-15">Error Reporting</span>
							<div class="checkbox checkbox-toggle">
								<input id="checkbox60" type="checkbox">
								<label for="checkbox60"></label>
							</div> 
						</div>
						<div class="d-flex mb-3">
							<span class="mr-auto fs-15">Show your status to all</span>
							<div class="checkbox checkbox-toggle">
								<input id="checkbox61" type="checkbox">
								<label for="checkbox61"></label>
							</div> 
						</div>
						<div class="d-flex">
							<span class="mr-auto fs-15">Keep up to date</span>
							<div class="checkbox checkbox-toggle">
								<input id="checkbox62" type="checkbox">
								<label for="checkbox62"></label>
							</div> 
						</div>
					</div> 
				</div>
            </div>
			<div class="p-3 border-top border-bottom">
				<h5 class="border-bottom-0 mb-0">Overview</h5> 
			</div>
			<div class="p-4"> 
				<div class="progress-wrapper">
					<div class="mb-3"> 
						<p class="mb-2">Achieves<span class="float-right text-muted font-weight-normal">95%</span></p>
						<div class="progress h-1"> 
							<div class="progress-bar bg-primary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
						</div> 
					</div>
				</div> 
				<div class="progress-wrapper pt-2">
					<div class="mb-3"> 
						<p class="mb-2">Projects<span class="float-right text-muted font-weight-normal">65%</span></p>
						<div class="progress">
							<div class="progress-bar bg-secondary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
						</div> 
					</div>
				</div> 
				<div class="progress-wrapper pt-2">
					<div class="mb-3">
						<p class="mb-2">Earnings<span class="float-right text-muted font-weight-normal">55%</span></p>
						<div class="progress">
							<div class="progress-bar bg-success col-8" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
					</div>
				</div>
				<div class="progress-wrapper pt-2"> 
					<div class="mb-3"> 
						<p class="mb-2">Balance<span class="float-right text-muted font-weight-normal">50%</span></p>
						<div class="progress h-1"> 
							<div class="progress-bar bg-warning w-50 " role="progressbar"></div>
						</div>
					</div>
				</div>
				<div class="progress-wrapper pt-2">
					<div class="mb-3"> 
						<p class="mb-2">Total Profits<span class="float-right text-muted font-weight-normal">80%</span></p>
						<div class="progress">
							<div class="progress-bar bg-info col-6" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
					</div>
				</div>
				<div class="progress-wrapper pt-2">
					<div class="mb-3">
						<p class="mb-2">Total Likes<span class="float-right text-muted font-weight-normal">75%</span></p>
						<div class="progress h-1">
							<div class="progress-bar bg-teal w-75" role="progressbar"></div> 
						</div>
					</div>
				</div>
			</div>
        </div>
    </div>
<!-- Color Setting -->
	<div id="style-switcher">
		<div>
			<ul class="colors">
				<li>
					<p class='colorchange' id='color'>
					</p>
				</li>
				<li>
					<p class='colorchange' id='color2'>
					</p>
				</li>
				<li>
					<p class='colorchange' id='color3'>
					</p>
				</li>
				<li>
					<p class='colorchange' id='color4'>
					</p>
				</li>
				<li>
					<p class='colorchange' id='color5'>
					</p>
				</li>
				<li>
					<p class='colorchange' id='style'>
					</p>
				</li>
			</ul>
		</div>
		<div class="bottom">
			<a href="" class="settings">
				<i class="fa fa-cog" aria-hidden="true"></i>
			</a>
		</div>
	</div>
    <!-- Color Setting -->
    <!-- Script Start -->
    <script src="/admin/js/jquery.min.js"></script>
    <script src="/admin/js/popper.min.js"></script>
    <script src="/admin/js/bootstrap.min.js"></script>
    <script src="/admin/js/custom.js"></script>
    <script th:src="@{/common/jquery.js}"></script>
</body>
<script >
    // $(document).ready(function (){
    //     $.ajax({
    //         url:"/admin/user",
    //         type:"GET",
    //         data:$("#").serializable
    //     })
    // })
</script>
</html>